// prefix.
@mi-prefix: mi-;
@mi-lang-en: ~'@{mi-prefix}lang-en-us';

// font-size.
@mi-font-size: 1rem;
@mi-font-size-sm: 12px;
@mi-font-size-normal: 14px;
@mi-font-size-base: 16px;

// gap.
@mi-gap: 8px;

// animation duration
@mi-anim-duration: .4s;

@mi-z-index: 20220511;
@mi-z-index-top: 20220602;
@mi-z-index-mask: 20220614;
@mi-z-index-modal: 20220620;

@mi-overflow-extend: 21px;

// color.
@mi-white: #fff;
@mi-black: #000;

// side menu.
@mi-side-width: (@mi-gap * 32 / @mi-font-size-base) * @mi-font-size;
@mi-side-height: (@mi-gap * 16 / @mi-font-size-base) * @mi-font-size;
@mi-side-large-height: (@mi-gap * 24 / @mi-font-size-base) * @mi-font-size;
@mi-side-width-scroll: ((@mi-gap * 34 + 1) / @mi-font-size-base) * @mi-font-size;
@mi-side-width-sm: (@mi-gap * 10 / @mi-font-size-base) * @mi-font-size;
@mi-side-width-sm-scroll: ((@mi-gap * 12 + 1) / @mi-font-size-base) * @mi-font-size;
@mi-side-width-margin: (@mi-gap * 2 / @mi-font-size-base) * @mi-font-size;
@mi-side-item-height: (@mi-gap * 6.25 / @mi-font-size-base) * @mi-font-size;
@mi-side-logo-size: (@mi-gap * 4 / @mi-font-size-base) * @mi-font-size;
@mi-side-logo-large-size: (@mi-gap * 8 / @mi-font-size-base) * @mi-font-size;

// header.
@mi-header-height: (@mi-gap * 6 / @mi-font-size-base) * @mi-font-size;
@mi-header-avatar-size: (@mi-gap * 3 / @mi-font-size-base) * @mi-font-size;

// content
@mi-content-padding-top: (@mi-gap * 16 / @mi-font-size-base) * @mi-font-size;

// font.
@mi-font-color: #333;
@mi-font-family: "Pingfang SC", "Microsoft YaHei", "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
@mi-code-family: Lucida Console, Consolas, "Courier New", "Source Code Pro", "Miscrosoft Yahei", "Segoe UI", "Lucida Grande", Helvetica, Arial, FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif;

// flex.
.flex(@align: center, @justify: center, @direction: row) {
    display: flex;
    align-items: @align;
    justify-content: @justify;
    flex-direction: @direction;
}

// border raiuds.
.border-radius(@raduis: 4) {
    border-radius: (@raduis / @mi-font-size-base) * @mi-font-size;
}

.border-radius-circle() {
    border-radius: 50%;
}

.linear-gradient-background() {
    background-color: var(--mi-dark, @mi-dark);
    background-image: linear-gradient(315deg, var(--mi-black, @mi-black) 0%, var(--mi-pre-dark, @mi-pre-dark) 74%);
}

.linear-gradient-background-grey() {
    background-color: #fff;
    background-image: linear-gradient(120deg, #fff 45%, #f5f5f5);
}

.linear-gradient-background-theme() {
    background-color: var(--mi-theme, @mi-theme);
    background-image: linear-gradient(127deg, var(--mi-gradient-s, @mi-gradient-s) 0%, var(--mi-gradient-m, @mi-gradient-m) 52%, var(--mi-gradient-e, @mi-gradient-e) 100%);
}

.linear-gradient-text() {
    background: transparent linear-gradient(127deg, var(--mi-gradient-s, @mi-gradient-s) 0%, var(--mi-gradient-m, @mi-gradient-m) 52%, var(--mi-gradient-e, @mi-gradient-e) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

// font size
.font-size(@size: @mi-font-size-normal) {
    font-size: (@size / @mi-font-size-base) * @mi-font-size;
    line-height: ((@size + 4) / @mi-font-size-base) * @mi-font-size;
}

// linear-gradient
.linear-gradient() {
    background: linear-gradient(127deg, var(--mi-gradient-s, @mi-gradient-s) 0%, var(--mi-gradient-m, @mi-gradient-m) 52%, var(--mi-gradient-e, @mi-gradient-e) 100%);
    color: linear-gradient(127deg, var(--mi-gradient-s, @mi-gradient-s) 0%, var(--mi-gradient-m, @mi-gradient-m) 52%, var(--mi-gradient-e, @mi-gradient-e) 100%);
}

// properties
.properties(@key, @value: @mi-gap) {
    @{key}: (@value / @mi-font-size-base) * @mi-font-size;
}

// text overflow ellipsis.
.text-ellipsis() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// letter spacing.
.letter-spacing(@value: 2) {
    .properties(letter-spacing, @value);
}

// tag
.tag(@bgColor: #ff5500, @txtColor: @mi-white) {
    background: @bgColor;
    margin-right: 0;
    .border-radius(16);
    color: @txtColor;
    .properties(line-height, 18);
    .properties(max-width, 64);
    .text-ellipsis();
    .properties(padding-left);
    .properties(padding-right);
    .properties(font-size, 12);
    .properties(height, 20);
}

@mi-theme: #f6ca9d;
@mi-primary: @mi-theme;
@mi-subsidiary: #808695;
@mi-success: #2F9688;
@mi-error: #ff4d4f;
@mi-danger: #ed4014;
@mi-warning: #ff9900;
@mi-info: #2db7f5;
@mi-selection: fade(@mi-theme, 80%);
@mi-link: @mi-primary;
@mi-font: @mi-white;
@mi-ink: @mi-black;
@mi-dark: #1d1e23;
@mi-deep: #2d2f32;
@mi-night: #3e3e3e;
@mi-dawn: #4c4c4c;
@mi-dark-grey: #333;
@mi-light-grey: #949494;
@mi-pre-dark: #434343;
@mi-light-purple: #5a72af;
@mi-light-blue: #8da6b8;
@mi-gradient-s: #d2b27d;
@mi-gradient-m: #f4d5a9;
@mi-gradient-e: #d1a466;

// search
@mi-search-text: fade(@mi-white, 85%);
@mi-search-list-sub-info: fade(@mi-white, 50%);
@mi-search-no-data: fade(@mi-white, 40%);
@mi-search-list-disabled: fade(@mi-white, 10%);
@mi-search-suffix: fade(@mi-white, 90%);

// animation
.@{mi-prefix} {
    &anim {
        transition: all @mi-anim-duration ease;
        
        /** fade */
        &-fade-enter-active,
        &-fade-leave-active {
            opacity: 1;
        }

        &-fade-enter-from,
        &-fade-leave-to {
            opacity: 0;
        }

        /** scale */
        &-scale-enter-active,
        &-scale-leave-active {
            opacity: 1;
            transform: scale(1);
        }

        &-scale-enter-from,
        &-scale-leave-to {
            transform: scale(0);
            opacity: 0;
        }

        /** slide left / slide right */
        &-slide-enter-active,
        &-slide-leave-active,
        &-slide-right-enter-active,
        &-slide-right-leave-active {
            opacity: 1;
            transform: translateX(0);
        }

        &-slide-enter-from,
        &-slide-leave-to,
        &-slide-right-enter-from,
        &-slide-right-leave-to {
            transform: translateX(20%);
            opacity: 0;
        }

        /** slide bottom */
        &-slide-bottom-enter-active,
        &-slide-bottom-leave-active {
            opacity: 1;
            transform: translateY(0);
        }

        &-slide-bottom-enter-from,
        &-slide-bottom-leave-to {
            transform: translateY(20%);
            opacity: 0;
        }

        /** slide fall */
        &-slide-fall-enter-active,
        &-slide-fall-leave-active {
            opacity: 1;
            transform: translate(0%) translateZ(0) rotate(0deg);
        }

        &-slide-fall-enter-from,
        &-slide-fall-leave-to {
            transform: translate(30%) translateZ(660px) rotate(30deg);
            opacity: 0;
        }

        /** newspaper */
        &-newspaper-enter-active,
        &-newspaper-leave-active {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        &-newspaper-enter-from,
        &-newspaper-leave-to {
            transform-style: preserve-3d;
            transform: scale(0) rotate(720deg);
            opacity: 0;
        }

        /** sticky */
        &-sticky-enter-active,
        &-sticky-leave-active {
            opacity: 1;
            transform: translateY(0);
        }

        &-sticky-enter-from,
        &-sticky-leave-to {
            transform: translateY(-200%);
            opacity: 0;
        }

        /** flip */
        &-flip-enter-active,
        &-flip-leave-active,
        &-flip-horizontal-enter-active,
        &-flip-horizontal-leave-active {
            opacity: 1;
            transform: rotateY(0deg);
        }

        &-flip-enter-from,
        &-flip-leave-to,
        &-flip-horizontal-enter-from,
        &-flip-horizontal-leave-to {
            transform-style: preserve-3d;
            transform: rotateY(-70deg);
            opacity: 0;
        }

        &-flip-vertical-enter-active,
        &-flip-vertical-leave-active {
            opacity: 1;
            transform: rotateX(0deg);
        }

        &-flip-vertical-enter-from,
        &-flip-vertical-leave-to {
            transform-style: preserve-3d;
            transform: rotateX(-70deg);
            opacity: 0;
        }

        /** fall */
        &-fall-enter-active,
        &-fall-leave-active {
            opacity: 1;
            transform: translateZ(0px) rotateX(0deg);
        }

        &-fall-enter-from,
        &-fall-leave-to {
            transform: translateZ(660px) rotateX(20deg);
            opacity: 0;
        }

        /** rotate */
        &-rotate-enter-active,
        &-rotate-leave-active {
            transform: translateY(0%) rotateX(0deg);
            opacity: 1;
        }

        &-rotate-enter-from,
        &-rotate-leave-to {
            transform-style: preserve-3d;
            transform: translateY(100%) rotateX(90deg);
            transform-origin: 0 100%;
            opacity: 0;
        }

        /** sign */
        &-sign-enter-active,
        &-sign-leave-active {
            transform: rotateX(0deg);
            opacity: 1;
        }

        &-sign-enter-from,
        &-sign-leave-to {
            transform-style: preserve-3d;
            transform: rotateX(-90deg);
            transform-origin: 50% 0;
            opacity: 0;
        }

        /** slit */
        &-slit-enter-active {
            animation: mi-anim-slit @mi-anim-duration forwards ease-out;
        }

        &-slit-leave-active {
            animation: mi-anim-slit @mi-anim-duration forwards ease-out reverse;
        }

        /** shake */
        &-shake-enter-active {
            animation: mi-anim-modal-shake @mi-anim-duration forwards linear;
        }

        &-shake-leave-active {
            animation: mi-anim-modal-shake @mi-anim-duration forwards linear reverse;
        }

        /** route change */
        &-page-slide-enter-active,
        &-page-slide-leave-active {
            transition: all @mi-anim-duration linear;
        }

        &-page-slide-leave-from,
        &-page-slide-enter-to {
            transform: translateX(0);
            opacity: 1;
        }

        &-page-slide-enter-from {
            transform: translateX(100%);
            opacity: 0;
        }

        &-page-slide-leave-to {
            transform: translateX(-100%);
            opacity: 0;
        }

        /** breadcrumb change */
        &-breadcrumb-enter-active,
        &-breadcrumb-leave-active {
            transition: all @mi-anim-duration linear;
        }

        &-breadcrumb-leave-from,
        &-breadcrumb-enter-to {
            transform: translateX(0);
            opacity: 1;
        }

        &-breadcrumb-enter-from {
            transform: translateX(-32px);
            opacity: 0;
        }

        &-breadcrumb-leave-to {
            transform: translateX(32px);
            opacity: 0;
        }

        /** anchor */
        &-anchor-enter-active,
        &-anchor-leave-active {
            opacity: 1;
            transform: translateX(0);
        }

        &-anchor-enter-from,
        &-anchor-leave-to {
            opacity: 0;
            transform: translateX(5rem);
        }
    }
}

@keyframes mi-anim-wait {
    60% {
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
}

@keyframes mi-anim-scan {
    0% {
        .properties(top, 6);
    }
    50% {
        .properties(top, 14);
    }
    100% {
        .properties(top, 6);
    }
}

@keyframes mi-anim-shake {
    0% {
        -webkit-transform: translate(0, 0) rotate(0);
        -moz-transform: translate(0, 0) rotate(0);
        -o-transform: translate(0, 0) rotate(0);
        -ms-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0);
    }
    25% {
        -webkit-transform: translate(-12px, 0) rotate(0);
        -moz-transform: translate(-12px, 0) rotate(0);
        -o-transform: translate(-12px, 0) rotate(0);
        -ms-transform: translate(-12px, 0) rotate(0);
        transform: translate(-12px, 0) rotate(0);
    }
    50% {
        -webkit-transform: translate(0, 0) rotate(0);
        -moz-transform: translate(0, 0) rotate(0);
        -o-transform: translate(0, 0) rotate(0);
        -ms-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0);
    }
    75% {
        -webkit-transform: translate(-12px, 0) rotate(0);
        -moz-transform: translate(-12px, 0) rotate(0);
        -o-transform: translate(-12px, 0) rotate(0);
        -ms-transform: translate(-12px, 0) rotate(0);
        transform: translate(-12px, 0) rotate(0);
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(0);
        -moz-transform: translate(0, 0) rotate(0);
        -o-transform: translate(0, 0) rotate(0);
        -ms-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0);
    }
}

@keyframes mi-anim-move {
    0% { transform: translate(1px, 1px) }
    33.33% { transform: translate(51px, 1px) }
    66.66% { transform: translate(21px, 51px) }
    100% { transform: translate(1px, 1px) }
}

@keyframes mi-anim-rotate {
    0% { transform: rotate(0) }
    100% { transform: rotate(360deg) }
}

@keyframes mi-captcha-modal-open {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0, 0, 1);
		-moz-transform: scale3d(0, 0, 1);
		-o-transform: scale3d(0, 0, 1);
		-ms-transform: scale3d(0, 0, 1);
		transform: scale3d(0, 0, 1);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		-moz-transform: scale3d(1, 1, 1);
		-o-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes mi-captcha-success {
	25% {
		-o-transform: (25deg);
		-moz-transform: rotate(25deg);
		-ms-transform: rotate(25deg);
		-webkit-transform: rotate(25deg);
		transform: rotate(25deg)
	}
	100% {
		-o-transform: rotate(-360deg);
		-moz-transform: rotate(-360deg);
		-ms-transform: rotate(-360deg);
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg)
	}
}

@keyframes mi-captcha-downtip {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes mi-anim-slit {
    0% {
        transform: translateZ(-3000px) rotateY(90deg);
        opacity: 1;
        animation-timing-function: ease-in;
    }
	50% {
        transform: translateZ(-250px) rotateY(89deg);
        opacity: 1;
        animation-timing-function: ease-in;
    }
    100% {
        transform: translateZ(0) rotateY(0deg);
        opacity: 1;
    }
}

@keyframes mi-anim-modal-shake {
	0% {
		opacity: 0;
		-webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	2.083333% {
		-webkit-transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	4.166667% {
		-webkit-transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	6.25% {
		-webkit-transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	8.333333% {
		-webkit-transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	10.416667% {
		-webkit-transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	12.5% {
		-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	14.583333% {
		-webkit-transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	16.666667% {
		-webkit-transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	18.75% {
		-webkit-transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	20.833333% {
		-webkit-transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	22.916667% {
		-webkit-transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	25% {
		-webkit-transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	27.083333% {
		-webkit-transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	29.166667% {
		-webkit-transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	31.25% {
		-webkit-transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	33.333333% {
		-webkit-transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	35.416667% {
		-webkit-transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	37.5% {
		-webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	39.583333% {
		-webkit-transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	41.666667% {
		-webkit-transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	43.75% {
		-webkit-transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	45.833333% {
		-webkit-transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	47.916667% {
		-webkit-transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	50% {
		opacity: 1;
		-webkit-transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	52.083333% {
		-webkit-transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	54.166667% {
		-webkit-transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	56.25% {
		-webkit-transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	58.333333% {
		-webkit-transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	60.416667% {
		-webkit-transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	62.5% {
		-webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	64.583333% {
		-webkit-transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	66.666667% {
		-webkit-transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	68.75% {
		-webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	70.833333% {
		-webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	72.916667% {
		-webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	75% {
		-webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	77.083333% {
		-webkit-transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	79.166667% {
		-webkit-transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	81.25% {
		-webkit-transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	83.333333% {
		-webkit-transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	85.416667% {
		-webkit-transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	87.5% {
		-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	89.583333% {
		-webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	91.666667% {
		-webkit-transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	93.75% {
		-webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	95.833333% {
		-webkit-transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	97.916667% {
		-webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}

	100% {
		opacity: 1;
		-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}
}


@mi-search: ~'@{mi-prefix}search';

.@{mi-search} {
    .flex();
    .properties(height, 42);
    .properties(width, 360);
    position: relative;
    z-index: @mi-z-index-top;

    &-input {
        width: 100%;
        height: 100%;
        .text-ellipsis();
        .properties(padding-top, 6);
        .properties(padding-bottom, 6);
        .properties(padding-left, 16);
        .properties(padding-right, 16);
        color: var(--mi-search-text, @mi-search-text);
        border: 1px solid var(--mi-theme, @mi-theme);
        background-color: var(--mi-ink, @mi-ink);
        background-image: linear-gradient(315deg, var(--mi-ink, @mi-ink) 0%, var(--mi-pre-dark, @mi-pre-dark) 74%);
        .properties(font-size, 14);
        .properties(line-height, 22);
        .letter-spacing();
        transition: all @mi-anim-duration ease;
        list-style: none;
        box-sizing: border-box;
        position: relative;

        &:focus,
        &:hover,
        &:active {
            outline: 0;
            border-color: var(--mi-theme, @mi-theme);
        }
    }

    &-has-suffix {
        .properties(padding-right, 42);
    }

    &-suffix {
        position: absolute;
        .properties(right, 16);
        color: var(--mi-search-suffix, @mi-search-suffix);
        cursor: pointer;
    }

    &-list {
        width: 100%;
        .properties(height, 360);
        position: absolute;
        border: 1px solid var(--mi-theme, @mi-theme);
        left: 0;
        .properties(top, 44);
        overflow: hidden;
        background-color: var(--mi-ink, @mi-ink);
        background-image: linear-gradient(315deg, var(--mi-ink, @mi-ink) 0%, var(--mi-pre-dark, @mi-pre-dark) 74%);
        transition: all @mi-anim-duration ease;
        transform-origin: 0 0;
        z-index: @mi-z-index-modal;
    }

    &-items {
        .flex(flex-start, flex-start, column);
        .letter-spacing();
        .properties(padding-top, 6);
        .properties(padding-bottom, 6);
        .properties(padding-left, 16);
        .properties(padding-right, 16);
        width: calc(100% + @mi-overflow-extend);
        height: calc(100% - 72px);
        transition: all @mi-anim-duration ease;
        position: absolute;
        left: 0;
        top: 0;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    &-item {
        width: 100%;
        .properties(font-size, 14);
        .properties(padding-top, 16);
        .properties(padding-bottom, 16);
        color: var(--mi-search-text, @mi-search-text);
        border-bottom: 1px solid var(--mi-night, @mi-night);
        cursor: pointer;
        .text-ellipsis();
        overflow: unset;
        .flex(center, flex-start);
        flex-wrap: nowrap;

        &:last-child {
            border-bottom: none;
        }

        &-avatar {
            .properties(width, 24);
            .properties(height, 24);
            .properties(margin-right);
            .border-radius-circle();
            border: 1px solid var(--mi-theme, @mi-theme);
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                transform: scale(1.1);
                .border-radius-circle();
                .linear-gradient-background();
            }
        }

        .anticon {
            .properties(font-size, 20);
            .properties(margin-right, 16);
        }

        &-info {
            max-width: calc(100% - 32px);

            > div {
                margin-bottom: 0;
                white-space: normal;
            }

            &-has-content {
                > div {
                    .properties(margin-bottom, 4);

                    &:first-child {
                        .properties(font-size, 16);
                        font-weight: bold;
                    }

                    &:last-child {
                        margin-bottom: 0;
                        color: var(--mi-search-list-sub-info, @mi-search-list-sub-info);
                    }
                }
            }
        }

        .info {
            .title {
                .properties(font-size, 16);
                .properties(margin-bottom);
                font-weight: bold;
            }
        }
    }

    &-pagination {
        .flex();
        .properties(font-size, 14);
        .properties(padding-top, 24);
        .properties(padding-bottom, 24);
        .properties(margin-left, 16);
        .properties(margin-right, 16);
        border-top: 1px solid var(--mi-night, @mi-night);
        .letter-spacing();
        position: absolute;
        bottom: 0;
        left: 0;
        width: calc(100% - 32px);
        .properties(height, 72);


        &-page,
        &-total {
            .flex();
            .properties(margin-right);
            color: var(--mi-search-text, @mi-search-text);

            span {
                .properties(margin-left, 4);
                .properties(margin-right, 4);
                .text-ellipsis();

                &.prev,
                &.next {
                    transition: all @mi-anim-duration ease;
                    color: var(--mi-search-text, @mi-search-text);
                    .properties(font-size, 18);
                    .flex();
                    cursor: pointer;
                }

                &.disabled {
                    color: var(--mi-search-list-disabled, @mi-search-list-disabled);
                    cursor: not-allowed;
                }
            }

            input {
                .properties(width, 32);
                .properties(height, 24);
                border: 1px solid fade(#000, 30%);
                .border-radius();
                .flex();
                text-align: center;
                .properties(margin-left, 4);
                .properties(margin-right);
                color: fade(#000, 80%);
                outline: none;

                &:hover,
                &:focus {
                    outline: none;
                    border: 1px solid fade(#000, 30%);
                }
            }
        }

        &-total {
            margin-right: 0;
        }
    }

    &-no-data,
    &-error,
    &-loading {
        .flex(center, center, column);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: var(--mi-search-no-data, @mi-search-no-data);

        > .anticon {
            .properties(font-size, 32);
            .properties(margin-bottom, 16);
        }
    }

    &-error {
        color: var(--mi-error, @mi-error);
        .properties(padding, 16);

        .anticon {
            .properties(font-size, 32);
        }
    }

    &-loading {
        &-spinner {
            .properties(width, 80);
            .properties(height, 80);
            display: inline-block;
            overflow: hidden;
            background: transparent;
        }

        &-anim {
            width: 100%;
            height: 100%;
            position: relative;
            transform: translateZ(0) scale(0.8);
            backface-visibility: hidden;
            transform-origin: 0 0;

            div {
                box-sizing: content-box;
            }

            > div {
                transform: scale(0.8);
                transform-origin: 50px 50px;

                > div {
                    animation: mi-anim-move 3s linear infinite;
                    position: absolute;

                    div:nth-child(1) {
                        .properties(width, 36);
                        .properties(height, 36);
                        .border-radius-circle();
                        border: 6px solid var(--mi-theme, @mi-theme);
                        background: transparent;
                    }

                    div:nth-child(2) {
                        .properties(width, 8.5);
                        .properties(height, 25.5);
                        transform: rotate(-45deg);
                        background: var(--mi-theme, @mi-theme);
                        border-radius: 0 0 4px 4px;
                        position: absolute;
                        .properties(top, 34);
                        .properties(left, 42.5);
                    }
                }
            }
        }

        &-text {
            .properties(margin-top, 16);
            .letter-spacing(4);
        }
    }

    &-key {
        color: var(--mi-theme, @mi-theme);
    }

    &-mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: @mi-z-index;
    }
}